<template>
  <div class="banner">
    <div class="wrap">
      <div class="slide" @click="toSearch">
        <div class="slider-container">
          <ul v-for="c1 in categoryList" :key="c1.categoryId">
            <li>
              <a
                :data-id="c1.categoryId"
                :data-name="c1.categoryName"
                :data-level="1"
                >{{ c1.categoryName }}</a
              ><i class="iconfont icon-arrow-right"></i>
              <div class="slide-list">
                <ul v-for="c2 in c1.categoryChild" :key="c2.categoryId">
                  <li>
                    <a>
                      <img
                        src="../images/mate.png"
                        :data-id="c2.categoryId"
                        :data-name="c2.categoryName"
                        :data-level="2"
                      />
                      <span
                        :data-id="c2.categoryId"
                        :data-name="c2.categoryName"
                        :data-level="2"
                        >{{ c2.categoryName }}</span
                      >
                    </a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="center">
      <div class="swiper-container" ref="swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img
              src="https://res.vmallres.com/cmscdn/CN/2022-09/9a1488b5221d4a29835430d269743c4b.jpg"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="https://res.vmallres.com/cmscdn/CN/2022-09/d3637e3554f745a9bc3e25b0ea38f0c3.jpg"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="https://res.vmallres.com/cmscdn/CN/2022-09/561dcea943b94f78941f7dd4524d8dbb.jpg"
            />
          </div>
          <div class="swiper-slide">
            <img
              src="https://res.vmallres.com/cmscdn/CN/2022-09/133552c038914fe499669102c90aa077.jpg"
            />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev swiper-button-white"></div>
        <div class="swiper-button-next swiper-button-white"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper/dist/js/swiper.min.js";
import "swiper/dist/css/swiper.min.css";
import { reqGetCategoryList } from "@/api/homeApi/index";

export default {
  name: "XBanner",
  async mounted() {
    await this.$nextTick();
    new Swiper(this.$refs.swiper, {
      autoplay: true, // 自动轮播
      // autoplay: {
      //   delay: 1000,
      // },
      loop: true, // 无限轮播
      // 小圆点
      pagination: {
        el: ".swiper-pagination",
        clickable: true, // 可以点击跳转
      },
      // 左右箭头
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

    const result = await reqGetCategoryList();
    this.categoryList = result;
    // console.log(result)
  },
  data() {
    return {
      // 首页三级分类列表
      categoryList: [],
    };
  },
  methods: {
    toSearch(e) {
      // e.target获取到触发事件的目标元素
      // e.target.dataset 获取目标元素的自定义属性
      const { id, name, level } = e.target.dataset;
      console.log(1);
      // 解决：点击空白区域也跳转
      // 只有可以点击的a元素才有自定义属性，其他元素没有
      if (!level) return;

      this.$router.push({
        name: "Search",
        query: {
          ...this.$route.query,
          [`category${level}Id`]: id,
          categoryName: name,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.banner {
  .wrap {
    position: relative;
    width: 1200px;
    margin: 0 auto;
    .slide {
      z-index: 999;
      cursor: pointer;
      position: absolute;
      left: 0px;
      top: 10px;
      width: 250px;
      height: 470px;
      padding: 10px 0;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1);
      .slider-container {
        height: 100%;
        width: 750px;
        overflow: hidden;
      }
      ul > li {
        width: 220px;
        height: 40px;
        text-align: left;
        padding-left: 30px;
      }
      ul > li:hover a {
        color: #000000;
      }
      ul > li > a {
        color: #999;
        font-size: 14px;
        display: inline-block;
        width: 150px;
        height: 40px;
      }
      i {
        float: right;
        margin-top: 5px;
        margin-right: 20px;
        font-size: 14px;
      }
      .slide-list {
        z-index: 1000 !important;
        display: none;
        position: absolute;
        top: 0;
        left: 250px;
        width: 500px;
        min-height: 486px;
        background-color: rgba(255, 255, 255);
        border: 1px solid #fff;
        border-left: none;
        padding-top: 2px;
        box-shadow: 16px 2px 10px 2px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        height: 480px;
      }
      li:hover > .slide-list {
        display: block;
      }
      .slide-list > ul {
        width: 250px;
        float: left;
      }
      .slide-list li {
        position: relative;
        width: 100%;
        height: 97px;
        box-sizing: border-box;
      }
      .slide-list span {
        position: absolute;
        font-size: 14px;
        top: 40px;
        left: 110px;
      }
      .slide-list img {
        width: 52px;
        height: 52px;
        margin-top: 20px;
        margin-left: 20px;
      }
      .slide-list li:hover span {
        color: #ff0000;
      }
      .slide-list1 {
        width: 744px;
      }
    }
  }
  .center {
    height: 550px;
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
</style>

<style>
.swiper-container {
  height: 100%;
}
.swiper-pagination-bullet-active {
  background-color: #fff !important;
}
.swiper-button-next,
.swiper-button-prev {
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  background-size: 20%;
}

.swiper-button-prev {
  left: 50% !important;
  margin-left: -350px;
}
.swiper-button-next {
  right: 50% !important;
  margin-right: -600px;
}
</style>
